<template>
  <t-header class="layout-header">
    <head-menu class="layout-header-menu">
      <template #logo>
        系统名称
      </template>

      <template #operations>

        <!-- 消息通知  -->
        <notice />
        <!-- 用户导航栏  -->
        <t-dropdown :options="headUserDropdownOptions" :min-column-width="88" placement="bottom"
          :popup-props="{ visible: headUserState.visible, onVisibleChange: headUserState.visibleChange, }">
          <div :class="['head-dropdown-nav', headUserState.visible ? 'is-active' : '']">
            {{ userState.userInfo.nickname }}
            <ChevronDownIcon v-if="headUserState.visible" class="head-dropdown-nav-icon" />
            <ChevronUpIcon v-else class="head-dropdown-nav-icon" />
          </div>
        </t-dropdown>
      </template>
    </head-menu>
  </t-header>

</template>

<script setup lang="ts">
import HeadMenu from '@/components/HeadMenu.vue'
import Notice from './Notice.vue';
import type { DropdownOption } from 'tdesign-vue-next';
import { ChevronUpIcon, ChevronDownIcon, UserIcon, LogoutIcon } from 'tdesign-icons-vue-next';
import { useUserStore } from '@store';
import { useI18n } from 'vue-i18n';

const { userState } = useUserStore();
const { replace, push } = useRouter();
const { t } = useI18n();

const headUserState = reactive({
  visible: false,
  visibleChange: (visible: boolean) => {
    headUserState.visible = visible
  },
})

const headUserDropdownOptions: DropdownOption[] = [
  {
    content: t('layout.header.user'),
    value: 'userProfile',
    prefixIcon(h) {
      return h(UserIcon, { size: '16px' })
    },
    onClick() {
      push('/sys/user/profile')
    },
  },
  {
    content: t('layout.header.signOut'),
    value: 'signOut',
    prefixIcon(h) {
      return h(LogoutIcon, { size: '16px' })
    },
    onClick() {
      replace('/login')
    },
  }
]
</script>

<style lang="less" scoped>
.layout-header {
  height: var(--td-size-13);

  &-menu {
    --header-height: var(--td-size-13);
  }

  .logo {
    min-width: 232px;
  }

  .head-dropdown-nav {
    height: var(--td-size-13);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;

    &-icon {
      margin-left: 5px;
      font-size: var(--td-size-6);
    }

    &.is-active {
      background-color: var(--td-brand-color-5);
      color: white;
    }

  }

}
</style>
